<template>
  <div id="barline" style="width: 500px; height: 350px"></div>
</template>

<script>
export default {
  name: 'barline',
  props: {
    barline1: {
      type: Number,
      default: 0
    },
    barline2: {
      type: Array,
      default: function () {
        return [];
      },
    },
    barline3: {
      type: Array,
      default: function () {
        return [];
      },
    },
    barline4: {
      type: Array,
      default: function () {
        return [];
      },
    },
    barline5: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
        legdata: []
    };
  },
  watch: {
    barline2() {
        this.init()
    },
    barline3() {
        this.init()
    },
    barline4() {
        this.init()
    },
    barline5() {
        this.init()
    },
    barline1() {
         if (this.barline1 == 1) {
        this.legdata = ["TRL2", "TRL3" ]
      } else if (this.barline1 === 2) {
        //   debugger
        this.legdata = ["TRL4", "TRL5" ]
      }
        this.init()
    }
  },
  created() {
    // this.init()
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        console.log(this.barline1, '++++++++++++');
    //   if (this.barline1 == 1) {
    //     this.legdata = ["TRL2", "TRL3" ]
    //   } else if (this.barline1 === 2) {
    //     //   debugger
    //     this.legdata = ["TRL4", "TRL5" ]
    //   }
      let barline = this.$echarts.init(document.getElementById("barline"));
      barline.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color:['#3168c3', '#4fade0'],
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        legend: {
          data: this.legdata,
        },
        xAxis: [
          {
            type: "category",
            data: this.barline4,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            // min: 0,
            // max: 250,
            // 单位间隔值
            // interval: 50,
            axisLabel: {
            //   formatter: "{value} ml",
              formatter: "{value}",
            },
          },
        //   {
        //     type: "value",
        //     name: "温度",
        //     // min: 0,
        //     // max: 25,
        //     // interval: 5,
        //     axisLabel: {
        //       formatter: "{value} °C",
        //     },
        //   },
        ],
        series: [
          {
            name: "TRL2",
            type: "bar",
            barWidth: "10%",
            data: this.barline2,
            itemStyle: {
              normal: {
                // color: 'red',
                barBorderRadius: [20, 20, 20, 20],
              },
            },
          },
          {
            name: "TRL3",
            type: "bar",
            barWidth: "10%",
            data: this.barline3,
            itemStyle: {
              normal: {
                // color: 'red',
                barBorderRadius: [20, 20, 20, 20],
              },
            },
          },
          {
            name: "指数",
            type: "line",
            // yAxisIndex: 1,
            data: this.barline5,
          },
        //   {
        //     name: "TRL3",
        //     type: "line",
        //     yAxisIndex: 1,
        //     data: [
        //       2.0, 3.2, 3.3, 4.5, 4.3, 10.2, 24.3, 23.4, 23.0, 6.5, 2.0, 6.2,
        //     ],
        //   },
        ],
      });
    },
  },
};
</script>

<style>
</style>